<template>
  <div class="wrapper" ref="wrapper" v-if="isShowCard">
    <div class="card">
      <button @click="closeCard">×</button>
      <img :src="img" id="region">
      <div class="title">
        <img src="@/assets/img/home/地图_定位.png">
        <span class="region">{{ region }}</span>
        <span class="littleTitle">简介</span>
      </div>
      <div class="brief">{{ this.brief }}</div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {  
    this.$bus.$on('changeShowCard',(value) => {
      this.isShowCard = true
      this.region = value
      this.brief = this.$store.state.cityInf[this.region].brief
      this.img = this.$store.state.cityInf[this.region].image
    })
  },
  data() {
    return {
      isShowCard: false,//是否展示卡片
      region:'',//地区名字
      brief:'',//城市省份的简介
      img:''//城市省份的图片
    }
  },
  methods: {
    closeCard(){
      this.isShowCard = false
    }
  },
  // watch:{
  //   isShowCard(newValue){
  //     if(newValue){
  //       this.$refs.wrapper.style.display = 'block'
  //     }else{
  //       this.$refs.wrapper.style.display = 'none'
  //     }
  //   }
  // }
}
</script>

<style scoped>
  .wrapper{
    background-color: rgba(255, 255, 255, .3);
    width: 100vw; 
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
  }
  button{
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    left: 50%;
    bottom: 5%;
    z-index: 999999;
    transform: translate(-50%,-50%);
    border:2px solid black;
    font-size: large;
  }
  .card{
    background-color: white;
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    /* border-radius: 5%;
    border: 1px black solid; */
    /* overflow: hidden; */
  }

  .card:hover button{
    display: block;
  }

  #region{
    display: block;
    position: absolute;
    height: 30%;
    width: 100%;
    transform: scale(1);
    transition:all 0.5s;
  }

  #region:hover{
    transform: scale(1.3);
    z-index: 99999;
  }

  .title{
    height: 15%;
    width: 100%;
    
    position: absolute;
    top: 30%;
    border-bottom: 2px gray dashed;
  }

  .title img{
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    top:8px;
  }

  .title span{
    display: block;
    position: absolute;
  }

  .title .region{
    left: 14%;
    top: 10%;
    color: black;
    font-size: 30px;
    font-weight: 600;
  }
  
  .title .littleTitle{
    left: 10%;
    bottom: 5%;
    color: gray;
    font-size: 20px;
    font-weight: 300;
  }

  .brief{
    position: absolute;
    height: 55%;
    bottom: 0;
    padding: 10%;
    font-size: 18px;
  }
</style>